<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 筋斗云-终极 </title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        body {
            background-color: #333;
        }

        .nav {
            width: 800px;
            height: 42px;
            margin: 100px auto;
            /*background-color: red;*/
            background: #fff url(images/rss.png) no-repeat right center;
            border-radius: 10px;
            position: relative;
        }

        .nav li {
            width: 83px;
            height: 42px;
            /*background-color: red;*/
            text-align: center;
            line-height: 42px;
            float: left;
            cursor: pointer;
        }

        ul {
            position: relative;
        }

        .nav .current {
            background: url(images/cloud.gif) no-repeat;
        }
    </style>
</head>

<body>
    <div class="nav">
        <ul id="navBar">
            <li class="current">北京校区</li>
            <li>上海校区</li>
            <li>广州校区</li>
            <li>深圳校区</li>
            <li>武汉校区</li>
            <li>关于我们</li>
            <li>联系我们</li>
            <li id="last">招贤纳士</li>
        </ul>
    </div>
    <script>
        // 需求：鼠标移入到每一个菜单 ，所有的li都没有背景，只有当前鼠标移入的元素有背景
        /*
                    思路分析3：
         1. 事件源：每个li
         2. 事件类型：点击 onclick
         3. 事件处理：如何记住当前被点击的li
        
        真正的解决方案
        1. 在事件发生前定义一个变量（全局变量）：记录当前被点击的位置：默认位置是第一个 let index = 0;
        * 方案1：记住当前被点击的li
        * 方案2：记住当前被点击的li的下标（建议）
         2. 点击发生后：修改index记住的位置为被点击的li的下标：遍历li的时候，需要拿到li的下标：给forEach的回调函数增加一个形参：下标（不用index）
         3. 修改鼠标移出的效果：不是默认回到第一个，而是回到记录的位置
         */

        // 1. 在事件发生前定义一个变量（全局变量）：记录当前被点击的位置：默认位置是第一个 let index = 0;
        //     * 方案1：记住当前被点击的li
        //     * 方案2：记住当前被点击的li的下标（建议）
        let index = 0;

        //1. 获取事件源：所有li，querySelectorAll('#navBar>li')
        let lis = document.querySelectorAll('#navBar>li')
        // console.log(lis);   已获取所有li
        //     * 伪数组不能绑定事件，循环遍历
        lis.forEach(function (item, i) {

            //     2. 确定事件类型：鼠标移入 onmouseover
            item.onmouseover = function () {
                // console.log(item);
                //     3. 事件处理
                //     3.1 让所有的li都没有背景：干掉类current：li.classList.remove('current')
                lis.forEach(function (li) {
                    // console.log(li);  classList.remove 去掉一个类名
                    li.classList.remove('current')
                })
                //     3.2 让自己添加上current类：li#last.classList.add('current')   classList.add 添加一个类名
                item.classList.add('current');
            }
            // 添加移出效果
            item.onmouseout = function () {
                // 事件处理,排他
                lis.forEach(function (li) {
                    // 去除其样式
                    li.classList.remove('current');
                })
                //第一个回复背景
                lis[index].classList.add('current')

            }

            //需求3:给li增加点击事件
            item.onclick = function () {

                // 2. 点击发生后：修改index记住的位置为被点击的li的下标：遍历li的时候，需要拿到li的下标：给forEach的回调函数增加一个形参：下标（不用index）
                index = i;
                console.log(i);
                console.log(item);
            }
            //   将恢复第一个背景的命令进行修改

        })

    </script>
</body>

</html>